<template>
    <!-- <van-nav-bar title="清研精准智慧门店系统"></van-nav-bar> -->
    <div class="container">
        <div class="title">清研精准智慧门店系统</div>
        <van-image :src="logo" class="avatar"  />
        <van-form @submit="onSubmit" class="loginForm">
            <van-cell-group inset>
                <van-field
                    v-model="state.id"
                    name="员工编号"
                    label="员工编号:"
                    label-width="70"
                    placeholder="员工编号"
                    size="large"
                    :rules="[{ required: true, message: '请输入员工编号' }]"
                    class="id"
                />
                <van-field
                    v-model="state.pass"
                    type="password"
                    name="密码"
                    label="密码:"
                    placeholder="密码"
                    size="large"
                    label-width="70"
                    :rules="[{ required: true, message: '请输入密码' }]"
                    class="pass"
                />
            </van-cell-group>
            <div class="submit">
                <van-button block type="primary" native-type="submit">登录</van-button>
            </div>
        </van-form>
        <div class="bar"></div>
    </div>
</template>
<script setup>
    import {reactive} from 'vue'
    import { useStore } from 'vuex'
    const store = useStore()
    const state = reactive({id:'',pass:''})
    import logo from 'assets/logo.png';
    const onSubmit = async () => {
        const form = {
            code:state.id,
            pass:state.pass
        }
        store.dispatch('user/login',form)
    }
</script>
<style lang="scss" scoped>
    .container{
        .title{
            text-align: center;
            font-size: 1.125rem /* 18/16 */;
            font-family: PingFang SC;
            font-weight: bold;
            color: #101D34;
            margin-top:3.125rem /* 50/16 */;
        }
        .avatar{
            margin-top:3.125rem /* 50/16 */;
            width:7.8125rem /* 125/16 */;
            height:1.75rem /* 28/16 */;
        }
        .loginForm{
            margin-top:1.88rem;
            .id,.pass{
                width: 17.5rem /* 280/16 */;
                height: 2.5rem /* 40/16 */;
                border: 1px solid #8195A5;
                border-radius: .625rem /* 10/16 */;
                margin:auto;
                display: flex;
                align-items: center;
            }
            .pass{
                margin-top:0.9375rem;
            }
        }
        .submit{
            button{
                width:18.125rem /* 290/16 */;
                height:2.75rem /* 44/16 */;
                background: linear-gradient(10deg, #5E2F88, #694AA5);
                border-radius:1.375rem /* 22/16 */;
                margin:2.5rem auto 0;
                border:none;
                font-size:1.125rem /* 18/16 */;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 2.75rem /* 44/16 */;
            }
        }
        .bar{
            width: 8.375rem /* 134/16 */;
            height: .3125rem /* 5/16 */;
            background: #101D34;
            border-radius: .15625rem /* 2.5/16 */;
            position: fixed;
            bottom:.3125rem /* 5/16 */;
            left:30%;
        }
    }
    .van-button--normal{
        // --van-button-normal-padding:35px 10px;
        // --van-button-normal-font-size:.4rem /* 30/75 */;
    }
    
</style>